<template>
  <div>
    <navbar></navbar>
    <div class="content">
      <div class="columns" style="margin: 0px 5% 50px 5%">
        <div class="column">
          <b-field horizontal label="用户名">
            <label>{{ username }}</label>
          </b-field>
          <b-field horizontal label="UID">
            <label>{{ uid }}</label>
          </b-field>
          <b-field horizontal label="声望">
            <label>{{ honor }}</label>
          </b-field>
          <b-field horizontal label="等级">
            <label>{{ level }}</label>
          </b-field>
          <b-field horizontal label="个性签名">
            <label>{{ tail }}</label>
          </b-field>
        </div>
        <div class="column">
          <socailInfo></socailInfo>
        </div>
      </div>
      <!-- 这个用户发过的所有帖子 -->
      <div style="margin: 0px 5% 50px 5%">
        <!-- 测试用div -->
        <!-- <div v-for="item in data" v-bind:key="item">
          {{ item }}
        </div> -->
        <section
          v-for="item in data"
          v-bind:key="item"
          @click="link(item.gid)"
          style="margin: 30px 15% 30px 15%"
        >
          <b-message type="is-info" has-icon>
            <div class="columns">
              <div class="column">
                <h3>{{ item.title.String }}</h3>
                <h3>{{ item.username.String }}</h3>
                <!-- <h3>{{ item.date.Time }}</h3> -->
                <time
                  datetime="2016-1-1"
                  style="font-size: 6px; float: right"
                  >{{
                    item.date.Time | dateformat("YYYY年MM月DD日")
                  }}</time
                >
              </div>
              <div class="column">
                <b-image
                  :src="item.images[0]"
                  alt=""
                  style="width: 100px"
                ></b-image>
              </div>
            </div>
          </b-message>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import navbar from "../components/common/navbar.vue";
import SocailInfo from "../components/userCom/socailInfo.vue";
export default {
  name: "zone",
  components: { navbar, SocailInfo },
  data() {
    return {
      uid: "",
      honor: "",
      level: "",
      subed: true,
      tail: "",
      username: "",
      data: [],
    };
  },
  methods: {
    async link(db) {
      this.gid = db;
      this.$router.push({
        name: "Gallery",
        query: {
          gid: this.gid,
        },
      });
    },
    getGalleryUid() {
      if (this.uid != "") {
        return new Promise((resolve) => {
          resolve(this.uid);
        });
      }
      let self = this;
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(self.uid);
        }, 300);
      });
    },
  },
  async beforeCreate() {
    this.uid = await this.$route.query.uid;
    let res = await this.$http.get("/go/socail/info/" + this.uid, {
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    // console.log(res);
    this.honor = res.data.honor.Int32;
    this.level = res.data.level;
    this.subed = res.data.subed;
    this.tail = res.data.tail;
    this.username = res.data.username;
    let res_img = await this.$http.get("/go/pic/getUser/" + this.uid, {
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    this.data = res_img.data.data;
    console.log(this.data);
  },
};
</script>
<style scoped>
.content {
  margin-top: 70px;
  min-height: calc(100vh - 34px);
}
</style>